import { useState, useEffect } from 'react';
import { Button } from 'antd';

interface CounterProps {
  msg?: string;
}

export default function Counter (props: CounterProps) {

  const [counter, setCounter] = useState<number>(0);

  // watch
  // updated
  useEffect(() => {
    console.log('heihei');
  }, [counter, props.msg]);

  useEffect(() => {
    // mounted / componentDidMount
    // 发请求
    console.log(document.querySelector('.xixi'));

    return () => {
      // beforeDestory / componentWillUnmount
      // 取消事件绑定 / 清空定时器

      // rect 矩形
      // react 反应
      console.log('bye bye');
    };
  }, []);

  return (
    <div className="xixi">
      { counter }
      <Button onClick={ () => setCounter(counter + 1) }>+1</Button>
    </div>
  );
}
